<template>
	<view class="shop-page">
		<view class="hander yu-flex yu-flex-col">
			<view class="check-box">
				<picker @change="CheckedProductType" :value="ProductTypeIndex" range-key="producttypename" :range="ProductTypeList">
					<view class="checktype yu-flex" v-if="ProductTypeList.length> 0">
						<text>类型：</text>
						<text>{{ProductTypeList[ProductTypeIndex].producttypename}}</text>
						<image src="../../static/select.png" style="width: 30rpx;height: 30rpx;" mode="scaleToFill"></image>
					</view>
				</picker>
				<u-input v-model="productname" placeholder="请输入商品名称" type="text" :border="true" custom-style="inputStyle" @blur="getDate(queryData)"/>
			</view>
		</view>
		<view style="height: 110rpx;"></view>
		<nodate v-if="list.length<1" />
		<view class="item u-flex u-row-between" v-for="(el, i) in list" :key="i" @click="goDetail(el)">
			<u-image width="250rpx" height="250rpx" :src="el.mainimg ? $api.json('baseUrl')+'/upload/' + el.mainimg : '../../static/textbook.png'"></u-image>
			<view class="u-flex yu-flex-1 yu-flex-col yu-between u-col-top u-p-l-20" style="height: 250rpx">
				<view class="u-font-36 yu-bold yu-color-3">{{el.productname}}</view>
				<view class="u-font-32 title u-line-3 yu-color-6 yu-flex-1 u-p-t-20">{{el.productinfo}}</view>
				<view class="price">
					<text class="yu-color-money">￥<text class="u-font-40">{{el.newprice}}</text></text>
					<text class="yu-color-9 u-p-l-20">￥<text style="text-decoration: line-through;">{{el.oldprice}}</text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				ProductTypeList: [],
				ProductTypeIndex: 0,
				productname:'',
			}
		},
		onLoad() {
			this.getDate({})
			this.findProductType()
		},
		computed:{
			queryData(){
				return {
					producttypeid: this.ProductTypeList[this.ProductTypeIndex].producttypeid,
					productname: this.productname
				}
			}
		},
		methods: {
			getDate(val) {
				this.$http('/product/findProduct ',val, (res) => {
					console.log(res, 555);
					this.list = res.data
				})
			},
			findProductType() {
				this.$http('/product/findProductType ', {}, (res) => {
					console.log(res, 555);
					this.ProductTypeList = [{producttypename:'全部',producttypeid:''}].concat(res.data)
				})
			},
			CheckedProductType(val) {
				this.ProductTypeIndex = val.detail.value
				this.getDate(this.queryData)
			},
			goDetail(info) {
				sessionStorage.setItem('product', JSON.stringify(info))
				uni.navigateTo({
					url: '../shopDetail/shopDetail'
				})
			}
			// producttypeid productname
		}
	}
</script>
<style lang="less">
	.shop-page {
		.item {
			padding: 20rpx;
			margin: 20rpx 10rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
		}

		.hander {
			width: 100%;
			background-color: #fff;
			position: fixed;
			top: 89rpx;
			left: 0;
			padding: 20rpx;
			box-sizing: border-box;
			z-index: 3;

			.check-box {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.checktype {
					display: flex;
					justify-content: space-between;
					width: 300rpx;
					margin-right: 10rpx;
					padding: 20rpx;
					border: 1px solid #dcdfe6;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
